<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <h1 id="title">{{title}}</h1>
      {{list}}
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

    <script>
      // 模拟一个异步接口
      function createData() {
        return new Promise((resolve, reject) => {
          setTimeout(() => {
            resolve({
              code: 0,
              msg: 'success',
              data: ['正在上映', '即将上映'],
            })
          }, 1000)
        })
      }

      // vue2 构造函数 数据驱动dom
      const vm = new Vue({
        el: '#app',
        // data写成函数形式，可以防止变量污染
        data() {
          return {
            title: '标题',
            count: 0,
            list: [],
          }
        },
        // 生命周期 （一生中，你一定会经历的阶段，出生 -> 成长 -> 死亡）
        // 生命周期给了-用户在 - 不同阶段 - 添加自己的代码 - 的机会。
        // 0-3
        // 3-10
        // 挂载之前,操作数据
        created() {
          // 添加自己的代码，一般初始化数据比较多 ()
          // 为什么在这个地方请求数据？
          // 答案：1. 数据驱动dom，首先需要数据
          // 2. 数据在这个地方请求，
          // 3. 然后才能渲染出来
          this.getData()

          // setInterval(() => {
          //   this.title += this.count++
          // }, 500)
          // console.log('created:', document.getElementById('title').innerHTML)
          // console.log('created', this)
        },
        // 挂载完毕; 操作dom
        mounted() {
          // console.log('mounted:', document.getElementById('title').innerHTML)
          // console.log('mounted', this)
        },
        // 更新生命周期
        updated() {
          console.log('我是更新的生命周期', this.title)
        },
        // 卸载生命周期
        destroyed() {
          console.log('销毁生命周期')
        },

        methods: {
          getData() {
            createData().then((res) => {
              console.log(res, 'res')
              this.list = res.data
            })
          },
        },
      })
    </script>
  </body>
</html>
